<template>
  <div id="app">
    <h1>vue_cli</h1>
    <p ref="money">我不知道钱是什么！我对钱没有兴趣</p>
    <button @click="getMoney">get money</button>
    <!-- 子传父 -->
    <ChildOne ref="comChildOne" />
    <Son />
  </div>
</template>

<script>
import ChildOne from "./components/ChildOne";
import Son from "./components/Son";
export default {
  name: "App",
  data() {
    return {
      msg: "tianqi",
      obj: {
        name: "tom",
        age: 10
      },
      arr: [
        { name: "tom", age: 10 },
        { name: "xiaohong", age: 50 },
        { name: "xiaoming", age: 80 }
      ]
    };
  },
  components: {
    ChildOne,
    Son
  },
  mounted() {
    console.log(this.$children); //是数组  子传父
    console.log(this.$children[0].info);
  },
  methods: {
    getMoney() {
      console.log(this.$refs);
      console.log(this.$refs.money.innerHTML);
      console.log(this.$refs.money.innerText);
      console.log(this.$refs.money.textContent);
      console.log(this.$refs.comChildOne.name);
      console.log(this.$refs.comChildOne.info);
    }
  }
};
</script>
<style lang="less"></style>
